<template>
    <div class="icon-page">
        <div class="icon-item" v-for="(item, index) in icons" :key="index">
            <span :class="item"></span>
            <label>{{item}}</label>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            icons:[
                'kkIcon-gitee','kkIcon-home',
                'kkIcon-star','kkIcon-fill-fire','kkIcon-earth','kkIcon-female','kkIcon-male',
                'kkIcon-loading','kkIcon-close','kkIcon-zan','kkIcon-tel','kkIcon-lock',
                'kkIcon-day','kkIcon-night','kkIcon-collect','kkIcon-target','kkIcon-flag',
                'kkIcon-picture','kkIcon-sort','kkIcon-edit','kkIcon-cycle','kkIcon-safe',
                'kkIcon-print','kkIcon-blind','kkIcon-map','kkIcon-position','kkIcon-paper',
                'kkIcon-phone','kkIcon-more-column','kkIcon-more','kkIcon-true','kkIcon-checked-cycle',
                'kkIcon-false','kkIcon-sub','kkIcon-eye','kkIcon-earphone','kkIcon-upload',
                'kkIcon-scan','kkIcon-clock','kkIcon-del','kkIcon-setting','kkIcon-folder-up',
                'kkIcon-data','kkIcon-reflash','kkIcon-add','kkIcon-search','kkIcon-notice',
                'kkIcon-people','kkIcon-download','kkIcon-message','kkIcon-folder-down',
                'kkIcon-folder-right','kkIcon-folder-left','kkIcon-arrow-left','kkIcon-fill-safe',
                'kkIcon-fill-map','kkIcon-fill-position','kkIcon-fill-phone','kkIcon-fill-true',
                'kkIcon-fill-add','kkIcon-fill-sub','kkIcon-fill-attention','kkIcon-fill-payment',
                'kkIcon-fill-false','kkIcon-fill-clock','kkIcon-fill-del','kkIcon-fill-folder-up',
                'kkIcon-fill-data','kkIcon-fill-notebook','kkIcon-fill-plane','kkIcon-fill-people',
                'kkIcon-fill-star','kkIcon-fill-folder-down'
            ]
        }
    }
}
</script>
<style lang="less" scoped>
@icon-color:#999999;
@text-color:#000000;
.icon-page{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,120px);
    // grid-template-rows: repeat(120px);
    justify-content: space-around;
    overflow-y: scroll;
    .icon-item{
        width:120px;
        height: 120px;
        margin-top: 5px;
        margin-bottom: 5px;
        background: #ffffff;
        border-radius: 1px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &>span{
            font-size: 36px;
            margin-bottom: 20px;
            color:@icon-color;
        }
        &>label{
            font-size: 12px;
            color: @text-color;
        }
    }
}
</style>